<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="title">
        Menu
    </ui:define>

    <ui:define name="description">
        Menu is a navigation component with one level of submenus.
    </ui:define>

    <ui:param name="documentationLink" value="/components/menu" />

    <ui:define name="implementation">
        
        <h:form>	
            <p:growl id="messages" showDetail="false"/>

            <h3 style="margin-top:0">Plain Menu</h3>
            <p:menu>
                <p:submenu label="Ajax">
                    <p:menuitem value="Save" action="#{menuView.save}" update="messages" icon="pi pi-save" />
                    <p:menuitem value="Update" action="#{menuView.update}" update="messages" icon="pi pi-refresh"/>
                </p:submenu>
                <p:submenu label="Non-Ajax">
                    <p:menuitem value="Delete" action="#{menuView.delete}" update="messages" ajax="false" icon="pi pi-times"/>
                </p:submenu>
                <p:submenu label="Navigations">
                    <p:menuitem value="External" url="http://www.primefaces.org" icon="pi pi-home"/>
                    <p:menuitem value="Internal" icon="pi pi-star"/>
                </p:submenu>
            </p:menu>

            <h3>Overlay</h3>
            <p:commandButton id="dynaButton" value="Show" type="button" icon="pi pi-home"/>
            <p:menu overlay="true" trigger="dynaButton" my="left top" at="left bottom">
                <p:submenu label="Ajax">
                    <p:menuitem value="Save" action="#{menuView.save}" update="messages" icon="pi pi-save"/>
                    <p:menuitem value="Update" action="#{menuView.update}" update="messages" icon="pi pi-refresh"/>
                </p:submenu>
                <p:submenu label="Non-Ajax">
                    <p:menuitem value="Delete" action="#{menuView.delete}" update="messages" ajax="false" icon="pi pi-times"/>
                </p:submenu>
                <p:submenu label="Navigations">
                    <p:menuitem value="External" url="http://www.primefaces.org" icon="pi pi-home"/>
                    <p:menuitem value="Internal" icon="pi pi-star"/>
                </p:submenu>
            </p:menu>

            <h3>Programmatic Menu</h3>
            <p:menu model="#{menuView.model}" />
            
            <h3>Toggleable</h3>
            <p:menu toggleable="true">
                <p:submenu label="Ajax">
                    <p:menuitem value="Save" action="#{menuView.save}" update="messages" icon="pi pi-save" />
                    <p:menuitem value="Update" action="#{menuView.update}" update="messages" icon="pi pi-refresh"/>
                </p:submenu>
                <p:submenu label="Non-Ajax">
                    <p:menuitem value="Delete" action="#{menuView.delete}" update="messages" ajax="false" icon="pi pi-times"/>
                </p:submenu>
                <p:submenu label="Navigations">
                    <p:menuitem value="External" url="http://www.primefaces.org" icon="pi pi-home"/>
                    <p:menuitem value="Internal" icon="pi pi-star"/>
                </p:submenu>
            </p:menu>
        </h:form>
        
    </ui:define>

</ui:composition>